document.addEventListener('DOMContentLoaded',function(event){
    // Search
    document.addEventListener('click',function(event){
        if(event.target.closest('.nav-search')){
            document.querySelector('.search-bar').classList.add('search-bar-active');

        }
        else if(event.target.closest('.search-cancel')){
            document.querySelector('.search-bar').classList.remove('search-bar-active');
        }
    });

    //login and signup

    document.addEventListener('click',function(event){
        //Check if the clicked element has the class 'nav-user' or 'already-account'
        //检查单击的元素是否具有类 'nav-user' 或 'already-account'
        const formElement = document.querySelector('.form');
        if(event.target.closest('.nav-user, .already-account')){
           formElement.classList.add('login-active');
           formElement.classList.remove('sign-up-active');
             
        }

        //Check if the clicked element has the class 'sign-up-btn'
        //检查单击的元素是否具有类 'sign-up-btn' 
        if(event.target.closest('.sign-up-btn')){
            formElement.classList.remove('login-active');
            formElement.classList.add('sign-up-active');
              
         }

         //Check if the clicked element has the class 'form-cancel'
        //检查单击的元素是否具有类 'form-cancel' 
        if(event.target.closest('.form-cancel')){
            formElement.classList.remove('login-active');
            formElement.classList.remove('sign-up-active');
              
         }


    });

    //fix header
    const header = document.querySelector('header');
    let lastScroollY = window.scrollY;

    window.addEventListener('scroll',function(){
        const currentScrollY = this.window.scrollY;

        //check if at the tap 
        if(currentScrollY === 0){
            header.classList.remove('header-fix');
        }
        else if(currentScrollY === lastScroollY){
            header.classList.add('header-fix');
        }else{
            header.classList.remove('header-fix');
        }

        lastScroollY = currentScrollY;






    });









})